<template>
  <div style="background-color: red">
    欢迎
  </div>

  <div>
    {{a}}
    {{data.a}}
    {{data.b}}
  </div>

  <div>
    <input v-model="data.a"/>
  </div>

  <div>
    <span style="color: red" v-if="data.a === 'sd'">李莫愁</span>
    <span style="color: blue" v-else-if="data.a === 'ad'">吃没吃</span>
    <span style="color: pink" v-else>成都的</span>
  </div>

  <div>
    <button @click="flack">ssss</button>
  </div>

  <div>
    <img :src="data.img">
  </div>

  <div>
    <input v-model="data.img"/>
  </div>

  <div>
    <select>
      <option v-for="fru in data.frut">{{ fru  }}</option>
    </select>
  </div>

  <div>
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";

const a = ref(1)
const data = reactive({
  a:'sd',
  b:"sdsds",
  img:'https://tse2-mm.cn.bing.net/th/id/OIP-C.gfkHd2miafHurt9WLToRrAHaGO?r=0&rs=1&pid=ImgDetMain',
  frut: ['dd','aa','cc'],
})
const flack = () =>{
  alert("dddd")
}
</script>
